<template>
  <div class="home">
    <!-- 顶部导航 -->
    <div class="header">
      <div class="logo">实验室预约平台</div>
      <div class="search">
        <el-input
          placeholder="请输入搜索内容"
          v-model="searchInput"
          class="search-input">
        </el-input>
        <el-button type="primary">搜索</el-button>
      </div>
      <div class="auth">
    <template v-if="!isLoggedIn">
      <router-link to="/syslogin" class="auth-link">登录</router-link>
      <span class="divider">|</span>
      <router-link to="/sysregister" class="auth-link">注册</router-link>
    </template>
    <template v-else>
      <el-button type="text" class="auth-link" @click="handleLogout">退出登录</el-button>
    </template>
  </div>
    </div>

    <!-- 轮播图 -->
    <div class="carousel">
      <el-carousel height="400px">
        <el-carousel-item v-for="item in 4" :key="item">
          <img :src="'carousel-' + item + '.jpg'" alt="carousel image" class="carousel-img">
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 功能卡片 -->
    <div class="feature-cards">
      <div class="feature-card" v-for="(feature, index) in features" :key="index">
        <div class="icon">
          <i :class="feature.icon"></i>
        </div>
        <div class="content">
          <h3>{{ feature.title }}</h3>
          <p class="links">
            <span v-for="(link, linkIndex) in feature.links" :key="linkIndex">
              <a href="#">{{ link }}</a>
              <span v-if="linkIndex < feature.links.length - 1" class="divider">|</span>
            </span>
          </p>
        </div>
      </div>
    </div>

    <!-- 实验室器材展示 -->
    <div class="equipment-section">
      <h2>实验室器材</h2>
      <div class="equipment-cards">
        <div class="equipment-card" v-for="(equipment, index) in equipments" :key="index">
          <div class="equipment-image">
            <img :src="equipment.image" :alt="equipment.name">
          </div>
          <div class="equipment-info">
            <h3>{{ equipment.name }}</h3>
            <p class="description">{{ equipment.description }}</p>
            <p class="price">￥{{ equipment.price }}</p>
            <el-button type="primary" size="small">查看项目</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 评论展示 -->
    <div class="comments-section">
      <h2>用户评价</h2>
      <div class="comment-cards">
        <div class="comment-card" v-for="(comment, index) in comments" :key="index">
          <div class="school-info">
            <img :src="comment.schoolLogo" :alt="comment.schoolName" class="school-logo">
            <h3>{{ comment.schoolName }}</h3>
          </div>
          <p class="comment-content">{{ comment.content }}</p>
          <div class="comment-footer">
            <span class="experiment">实验项目：{{ comment.experiment }}</span>
            <span class="time">{{ comment.time }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 合作院校展示 -->
    <div class="partner-schools">
      <h2>合作院校</h2>
      <div class="school-scroll">
        <div class="school-container" :style="{ transform: `translateX(${scrollPosition}px)` }">
          <!-- 第一组 -->
          <div class="school-list">
            <div class="school-item" v-for="school in schools" :key="school.name">
              <img :src="school.logo" :alt="school.name" class="school-logo">
            </div>
          </div>
          <!-- 第二组（用于无缝滚动） -->
          <div class="school-list">
            <div class="school-item" v-for="school in schools" :key="school.name + '-copy'">
              <img :src="school.logo" :alt="school.name" class="school-logo">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tsinghua from '@/assets/images/sysimg/workstation.jpg'
export default {
  name: 'Home',
  data() {
    return {
      searchInput: '',
      isLoggedIn: false, // 新增状态变量，用于控制登录状态
      features: [
        {
          icon: 'el-icon-date',
          title: '预约管理',
          links: ['预约实验室', '查看预约', '取消预约']
        },
        {
          icon: 'el-icon-monitor',
          title: '实验室信息',
          links: ['实验室列表', '使用说明']
        },
        {
          icon: 'el-icon-document',
          title: '实验资料',
          links: ['资料下载', '实验指南']
        },
        {
          icon: 'el-icon-message',
          title: '通知公告',
          links: ['最新公告', '规章制度']
        }
      ],
      equipments: [
        {
          name: '高性能显微镜',
          description: '德国进口专业级显微镜，可用于精密观察',
          price: '29999',
          image: tsinghua
        },
        {
          name: '实验分析仪',
          description: '多功能实验数据分析仪器',
          price: '19999',
          image: '/images/analyzer.jpg'
        },
        {
          name: '实验室工作站',
          description: '高配置实验数据处理工作站',
          price: '39999',
          image: '/src/images/workstation.jpg'
        },
        {
          name: '光谱仪',
          description: '精密光谱分析仪器',
          price: '25999',
          image: '/images/spectrometer.jpg'
        },
        {
          name: '实验室恒温箱',
          description: '精确温度控制实验设备',
          price: '15999',
          image: '/images/incubator.jpg'
        },
        {
          name: '离心机',
          description: '高速实验室离心设备',
          price: '12999',
          image: '/images/centrifuge.jpg'
        }
      ],
      comments: [
        {
          schoolName: '清华大学',
          schoolLogo: '/images/schools/tsinghua.png',
          content: '实验室设备先进，预约系统便捷，实验过程中得到了专业的指导。整体体验非常好，对我们的科研工作帮助很大。',
          experiment: '纳米材料性能测试',
          time: '2024-03-15'
        },
        {
          schoolName: '浙江大学',
          schoolLogo: '/images/schools/zju.png',
          content: '平台响应速度快，实验室管理规范，设备维护得当。特别是在线预约系统大大提高了我们的工作效率。',
          experiment: '生物样本分析',
          time: '2024-03-10'
        },
        {
          schoolName: '复旦大学',
          schoolLogo: '/images/schools/fudan.png',
          content: '实验室环境优越，技术支持团队专业度高，解决问题及时。是一个非常理想的科研合作平台。',
          experiment: '光谱分析实验',
          time: '2024-03-08'
        }
      ],
      scrollPosition: 0,
      schools: [
        { name: '清华大学', logo: '/images/schools/tsinghua.png' },
        { name: '北京大学', logo: '/images/schools/pku.png' },
        { name: '浙江大学', logo: '/images/schools/zju.png' },
        { name: '复旦大学', logo: '/images/schools/fudan.png' },
        { name: '上海交通大学', logo: '/images/schools/sjtu.png' },
        { name: '南京大学', logo: '/images/schools/nju.png' },
        { name: '武汉大学', logo: '/images/schools/whu.png' },
        { name: '中国科技大学', logo: '/images/schools/ustc.png' }
      ]
    }
  },
  mounted() {
    this.startScroll();
  },
  beforeDestroy() {
    this.stopScroll();
  },
  methods: {
    startScroll() {
      this.scrollInterval = setInterval(() => {
        this.scrollPosition -= 0.5;
        const scrollWidth = this.schools.length * 200; // 一组学校的总宽度
        if (Math.abs(this.scrollPosition) >= scrollWidth) {
          this.scrollPosition = 0;
        }
      }, 16);
    },
    stopScroll() {
      if (this.scrollInterval) {
        clearInterval(this.scrollInterval);
      }
    },
    methods: {
    // 用户登录逻辑
    async handleLogin() {
      // ... 登录逻辑 ...
      // 登录成功后
      this.isLoggedIn = true;
    },
    // 用户登出逻辑
    handleLogout() {
      // 执行登出操作，例如清除用户信息、调用登出API等
      // ...
      // 将isLoggedIn设置为false
      this.isLoggedIn = false;
      // 跳转到登录页或其他页面
      this.$router.push('/syslogin');
    }
  }
  }
}
</script>

<style scoped>
.home {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  flex: 0 0 200px;
}

.search {
  display: flex;
  gap: 10px;
  flex: 0 0 400px;
  justify-content: center;
}

.search-input {
  width: 300px;
}

.auth {
  display: flex;
  gap: 10px;
  flex: 0 0 150px;
  justify-content: flex-end;
}

.auth-link {
  text-decoration: none;
  color: #409EFF;
  cursor: pointer;
  font-weight: bold;
}

.auth-link:hover {
  color: #66b1ff;
}

.divider {
  margin: 0 8px;
  color: #dcdfe6;
}

.carousel {
  margin-bottom: 40px;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 20px;
}

.feature-card {
  flex: 1;
  display: flex;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.icon {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #409EFF;
}

.content {
  width: 75%;
}

.content h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.links {
  font-size: 14px;
  color: #666;
}

.links a {
  color: #666;
  text-decoration: none;
}

.links a:hover {
  color: #409EFF;
}

.equipment-section {
  padding: 20px 0;
}

.equipment-section h2 {
  margin-bottom: 20px;
  text-align: center;
}

.equipment-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.equipment-card {
  display: flex;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  padding: 20px;
}

.equipment-image {
  width: 25%;
  display: flex;
  align-items: center;
}

.equipment-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.equipment-info {
  width: 75%;
  padding-left: 20px;
}

.equipment-info h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.description {
  color: #666;
  margin-bottom: 10px;
}

.price {
  color: #f56c6c;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.comments-section {
  padding: 40px 0;
}

.comments-section h2 {
  text-align: center;
  margin-bottom: 30px;
}

.comment-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0 20px;
}

.comment-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.school-info {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.school-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-right: 10px;
}

.school-info h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.comment-content {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin-bottom: 15px;
  min-height: 70px;
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.partner-schools {
  padding: 40px 0;
  background: #f5f7fa;
  margin-top: 40px;
}

.partner-schools h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #303133;
}

.school-scroll {
  overflow: hidden;
  position: relative;
  height: 80px;
  margin: 0 40px;
}

.school-container {
  display: flex;
  position: absolute;
  left: 0;
  transition: transform 0.1s linear;
}

.school-list {
  display: flex;
  gap: 40px;
  padding: 10px 20px;
}

.school-item {
  flex: 0 0 160px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  padding: 10px;
}

.school-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style>
